<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js:回调函数的使用</title>
</head>
<body>
    <script>
        // 1）在代码中，fun首先被执行
        // 2）fun函数执行，js的执行转移到fun函数内部，fun函数内部的语句从上往下执行
        // 3）在fun函数中调用callback
        // 4）在调用fun函数时传入的函数（callback）被执行
        // 5）执行callback函数中的内容
        

        // 示例1：
        function fun(callback){
            console.log('fun执行');
            callback(); //调用过程可以传递参数
        }
        function sayHello(){
            console.log("callback:hello world")
        }

        fun(sayHello)

        //匿名函数的简写方式
        fun(() => {
            console.log("回调执行了")
        })

        // 示例2：
        function add(num1,num2,callback){
            var sum = num1 + num2;
            callback(sum)
        }

        add(1,2,(sum) => {
            console.log(sum)
        })

        // 6) 注意：在执行回调函数前最好确认其实一个函数
        function add1(num1,num2,callback){
            var sum = num1 + num2;
            // 判断callback接收到的数据是一个函数
            if(typeof callback === 'function'){
                // callback是一个函数，才能当回调函数使用
                callback(sum)
            }
        }

        // 7)回调函数中this的指向问题
        function createData(callback){
            callback();
        }
        var obj = {
            data:100,
            tool:function(){
                createData(function(n){
                    console.log(this,1111); //window 1111
                })
            }
        }
        obj.tool()
        /*分析：this指向是 离它最近的或者嵌套级别的 function/方法的调用者，这里离它最近的function是
        function(n)，会回到上面的callback()中，这时候调用者就不是obj而是window。*/
        // 解决回调函数this指向的方法
        // 1箭头函数:回调函数（若回调函数是普通函数时）当参数传入另外的函数时，若不知道这个函数内部怎么调用回调函数，就会出现回调函数中的this指向不明确的问题（就比如上面例子中this指向的不是obj而是window）。所以 把箭头函数当回调函数，然后作为参数传入另外的函数中就不会出现this指向不明的问题。
        function createData1(callback){
            callback(999)
        }
        var obj1 = {
            data: 100,
            tool: function(){
                createData1((n) => {
                    this.data = n
                })
            }
        }
        obj1.tool();
        console.log(obj1.data)
        
    </script>
</body>
</html>